media queries - 03

				<div class="main"> Footer design using HTML and CSS</div>
				<footer class="footer-distributed">
					<div class="footer-left">
						<p class="footer-links">
							<a href="#">home</a>  *
							<a href="#">blog</a>  *
							<a href="#">pricing</a>  *
							<a href="#">about</a>  *
							<a href="#">faq</a>  *
							<a href="#">contact</a>
						</p>
						<p class="footer-company-name">company name © 2020</p>
					</div>
		
					<div class="footer-center">
						<div><i class="fa fa-map-marker"></i>
							<p><span>address:</span> city, country</p>
						</div>
		
						<div><i class="fa fa-phone"></i>
							<p>telehone number</p>
						</div>
						<div><i class="fa fa-envelope"></i>
							<p><a href="mailto:[email protected]">email contact</a></p>
						</div>
					</div>
		
					<div class="footer-right">
						<p class="footer-company-about">
							<span>About the company</span>
							<span>A web designing company</span>
						</p>
						<div class="footer-icons">
							<a href="#"><i class="fa fa-facebook"><img src="../images/facebook.png" width="50"/></i></a>
							<a href="#"><i class="fa fa-twitter"><img src="../images/twitter.png" width="50"/></i></a>
							<a href="#"><i class="fa fa-insta"><img src="../images/insta.png" width="50"/></i></a>
						</div>
					</div>
				</footer>
				<style>
					.main {max-height: 30vw; background-image: repeating-linear-gradient(86deg, red, yellow, black); color: cyan;font-size: 38pt;text-align: center; line-height: 40vw;}
					footer{position: fixed;	bottom: 0;}
					.footer-distributed{background-image:repeating-linear-gradient(55deg, lightgray, black, white); box-shadow: 0 .1vw .1vw 0 lightblue; box-sizing: border-box; width: 100%; text-align: left; font: bold 1.5vw sans-serif;padding: 1vw 1vw; margin-top: 2vw;}
					.footer-distributed .footer-left, .footer-distributed .footer-center,.footer-distributed .footer-right{display: inline-block;vertical-align: top;}

					.footer-distributed .footer-left{width: 35%;}
					.footer-distributed .footer-links{color: green;margin: 1vw 0 1.2vw;padding: 0;}
					.footer-distributed .footer-links a{display:inline-block; line-height: 1.5;	text-decoration: none; color: inherit;}
					.footer-distributed .footer-company-name{color: black; font-size: 1.4vw;font-weight: bold;margin: 0;}

					.footer-distributed .footer-center{width: 35%; padding-left: 2vw;}
					.footer-distributed .footer-center i.fa-envelope{font-size: 1.3vw;line-height: 1.8vw;}
					.footer-distributed .footer-center p{display: inline-block;	color: dodgerblue; vertical-align: middle; margin:0;}
					.footer-distributed .footer-center p span{display:block; font-weight: bold; font-size:2vw;line-height:1.2;}
					.footer-distributed .footer-center p a{color: dodgerblue;text-decoration: none;}

					.footer-distributed .footer-right{width: 20%;}
					.footer-distributed .footer-company-about span{	display: block;	color: black;font-size: 1.3vw; font-weight: bold;margin-bottom: 2vw;}
					.footer-distributed .footer-icons{margin-top: 2.5vw;}
					.footer-distributed .footer-icons a{display: inline-block;width: 3.4w;	height: 3.3vw; cursor: pointer; background-color: darkgrey;	font-size: 2vw;	text-align: center;	line-height: 3.5vw;	margin-right: .3vw; margin-bottom: .5vw;}


					@media (max-width: 880px) {
						.footer-distributed{font: bold 1.4vw sans-serif;grid-column:1/2;}
						.footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right{display: block;	width: 100%; margin-bottom: 4vw;text-align: center;	}
						.footer-distributed .footer-center i{margin-left: 0;}
						.main {line-height: normal;	font-size: auto;}
					}

				</style>